<template>
	<view>
		<!-- <web-view :src="hrefUrl"></web-view> -->
		<view>
			<uni-swiper-dot :info="estateAlbum" :current="current" :field="description" mode="nav">
			    <swiper class="swiper-box" @change="change" style="height: 538upx;">
			        <swiper-item v-for="(item ,index) in estateAlbum" :key="index">
			            <view class="swiper-item">
							<img :src="item.image" alt="" style="width:750upx;height: 538upx;">
			            </view>
			        </swiper-item>
			    </swiper>
			</uni-swiper-dot>
			<image @click="skipConcernListPage" src="../../../static/images/estate/concern-file.png" class="concern-file" mode=""></image>
		</view>
		<!-- 第一部分 -->
		<view class="d-flex flex-column border-bottom estate-title-part j-center">
			<text class="title-top">{{ houseTypeInfo.title }}</text>
			<view class="d-flex" style="margin: 20upx 0 40upx;">
				<uni-tag :text="houseTypeInfo.salesState" type="success" size="small" class="tag-item"></uni-tag>
				<template v-for="(item, index) in houseTypeInfo.tags">
					<uni-tag :text="item" size="small" class="tag-item" :key="index"></uni-tag>
				</template>
			</view>
			<view class="d-flex j-sb" style="height: 64upx;">
				<text style="color: #F85D5A;font-size: 32upx;font-weight: bold;" v-if="houseTypeInfo.totalPrice">{{houseTypeInfo.totalPrice}}</text>
				<view @click="skipToHouseloanCalculator" class="calc-btn" style="width: 150upx;height: 40upx;border-radius: 20upx;">
					<text>房贷计算器</text>
				</view>
			</view>
			<view class="title-basic-info">
				<view style="width: 50%;">
					<text>建筑面积：</text>
					<text style="color: #151515;" v-if="houseTypeInfo.buildingArea">{{houseTypeInfo.buildingArea}}</text>
				</view>
				<view>
					<text>户型朝向：</text>
					<text style="color: #151515;" v-if="houseTypeInfo.orientation">{{houseTypeInfo.orientation}}</text>
				</view>
			</view>
			<view class="title-basic-info">
				<view style="width: 50%;">
					<text>首付占比：</text>
					<text style="color: #151515;" v-if="houseTypeInfo.payment">{{houseTypeInfo.payment}}</text>
				</view>
				<view>
					<text>物业类型：</text>
					<text style="color: #151515;" v-if="houseTypeInfo.property">{{houseTypeInfo.property}}</text>
				</view>
			</view>
			<view class="title-basic-info">
				<view>
					<text>月供：</text>
					<text style="color: #151515;" v-if="houseTypeInfo.mpayment">{{houseTypeInfo.mpayment}}</text>
				</view>
			</view>
			<view class="d-flex j-sb a-center" style="line-height: 84upx;">
				<view class="single-row-over d-flex a-center font-14" style="width: 600upx;">
					<text style="color: #878787;">所属楼盘: </text>
					<text style="color: #000000;text-indent: .5em;" v-if="estateContent.houseAddress">{{estateContent.houseAddress}}</text>
				</view>
				<text style="font-size: 28upx;color: #878787;">></text>
			</view>
		</view>
		<sun-divider></sun-divider>
		<view class="px-2 pt-2">
			<image src="../../../static/images/estate/call.png" style="height: 152upx;" mode=""></image>
		</view>
		<!-- 用户评论 -->
		<view class="estate-intro-part px-2" style="width: 710upx;padding-bottom: 14upx;">
			<view class="apart-chapter">
				<text class="module-title">用户评论({{estateComment.length}})</text>
				<text @click="skipUserCommentPage" class="font-24" style="color: #999999;">查看全部></text>
			</view>
			<view>
				<view v-for="(item,index) in showEstateComment" :key="index" class="d-flex flex-column border-bottom" style="padding: 36upx 0;">
					<view class="d-flex a-center" style="height: 80upx;">
						<image src="../../../static/images/estate/author.png" style="width: 76upx;height: 76upx;border-radius: 38upx;"
						 mode=""></image>
						<view class="d-flex flex-column j-sb" style="margin-left: 10upx;height: 80upx;margin-top: -16upx;">
							<text style="font-size: 32upx;color: #2A2A2A;font-weight: bold;">{{item.userName}}</text>
							<uni-rate size="20" :activeColor="starColor" :value="item.score"></uni-rate>
						</view>
					</view>
					<view style="margin-top: 20upx;">
						<text style="font-size: 28upx;color: #2A2A2A;line-height: 44upx;">{{item.content}}</text>
					</view>
				</view>
			</view>
			<view class="more-info-module" v-if="!commentPartVisible" @click="showCommentContent()">
				<image src="../../../static/images/estate/comment.png" style="width: 26upx;height: 26upx;" mode=""></image>
				<text style="margin-left: 10upx;">我要点评</text>
			</view>
			<!-- <uni-rate size="32" :activeColor="starColor" value="4.6"></uni-rate> -->
			<view class="personal-comment-part" v-if="commentPartVisible">
				<view class="d-flex flex-column">
					<view v-for="(item,index) in rateConfig" :key="index" class="d-flex a-center" style="height: 72upx;">
						<text style="margin-right: 20upx;">{{item.field}}</text>
						<uni-rate size="32" :activeColor="starColor" :customFlag="index" :value="commentRate" @rateChange="getNewRate"></uni-rate>
						<text style="margin-left: 60upx;">{{item.text}}</text>
					</view>
				</view>
				<view>
					<text>综合评分：<text style="color: red;font-size: 40upx;">{{comprehensiveScore}}</text></text>
				</view>
				<text>点评内容</text>
				<input type="textarea" placeholder="输入点评内容" rows="6" class="sun-textarea" v-model="comentContent"/>
			    <view class="more-info-module" @click="submitComment()">
				    <image src="../../../static/images/estate/comment.png" style="width: 26upx;height: 26upx;" mode=""></image>
				    <text style="margin-left: 10upx;">提交点评</text>
			    </view>
			</view>
		</view>
		<!-- 大家都在问 -->
		<view class="estate-intro-part px-2" style="width: 710upx;padding-bottom: 14upx;">
			<view class="apart-chapter">
				<text class="module-title">大家都在问({{questions.length}})</text>
				<text @click="skipToQuestionPage()" class="font-24" style="color: #999999;">查看全部></text>
			</view>
			<view style="margin-top: 30upx;">
				<view v-for="(item,index) in showQuestions" :key="index" style="font-size: 28upx;">
					<view class="d-flex j-sb" style="line-height: 60upx;">
						<view class="d-flex a-center">
							<uni-tag text="问" size="small" type="error" style="margin-right: 20upx;"></uni-tag>
							<text style="color: #2A2A2A;">{{item.content}}</text>
						</view>
						<text style="color: #999999;">{{item.questionList.length}}个回答</text>
					</view>
					<view class="d-flex a-center" v-if="item.questionList.length > 0" style="line-height: 60upx;">
						<uni-tag text="答" size="small" type="success" style="margin-right: 20upx;"></uni-tag>
						<text style="color: #2A2A2A;">{{item.questionList[0].content}}</text>
					</view>
				</view>
			</view>
			<view v-show="!showQuestionBox" class="more-info-module" @tap="startQuestion()">
				<image src="../../../static/images/estate/question.png" style="width: 26upx;height: 26upx;" mode=""></image>
				<text style="margin-left: 10upx;">我要提问</text>
			</view>
			<view style="margin-top: 10upx;" class="personal-comment-part" v-show="showQuestionBox">
				<text>提问内容</text>
				<input type="textarea" placeholder="输入提问信息" rows="6" class="sun-textarea" v-model="questionContent"/>
				<view v-show="showQuestionBox" class="more-info-module" @tap="saveQuestion()">
					<image src="../../../static/images/estate/question.png" style="width: 26upx;height: 26upx;" mode=""></image>
					<text style="margin-left: 10upx;">提交提问</text>
				</view>
			</view>
		</view>
	    <sun-divider></sun-divider>
		<!-- 户型展示 -->
		<view class="estate-intro-part px-2" style="width: 710upx;padding-bottom: 14upx;">
			<view class="apart-chapter">
				<text class="module-title">本楼盘其他户型({{estateApart.length}})</text>
				<text @click="skipApartLayoutPage" class="font-24" style="color: #999999;">查看更多></text>
			</view>
			<apart-slide :dataList="estateApart"></apart-slide>
		</view>
		<sun-divider></sun-divider>
		<!-- 猜你喜欢 -->
		<view class="estate-intro-part px-2" style="width: 710upx;padding-bottom: 14upx;">
			<view class="apart-chapter">
				<text class="module-title">猜你喜欢</text>
				<!-- <text @click="skipUserCommentPage" class="font-24" style="color: #999999;">查看全部></text> -->
			</view>
			<view>
				<view v-for="(item,index) in customLikes" @tap="checkEstateDetail(item.id)" :key="index" style="padding: 40upx 0;" class="d-flex flex-column j-sb border-bottom">
					<view class="d-flex j-sb">
						<view style="margin-right: 34upx;">
							<image :src="item.thumb?item.thumb:defaultLikeSrc" style="width: 242upx;height: 190upx;border-radius: 10upx;" mode=""></image>
						</view>
						<view class="d-flex flex-column j-sb" style="width: 428upx;">
							<text style="font-size: 32upx;font-weight: 600;line-height: 44upx;">{{item.projectName}}</text>
							<text style="color: #F85D5A;font-size: 28upx;">{{item.housePrice}}元/㎡</text>
							<text class="single-row-over">{{item.houseAddress}}/{{item.area}}</text>
							<view class="d-flex a-center" style="flex-wrap: wrap;">
								<uni-tag :text="item.salesState" style="margin-right: 6upx;" size="small" type="success"></uni-tag>
								<uni-tag v-for="(item1,index1) in item.tags.split(' ')" style="margin-right: 4upx;margin-bottom: 4upx;" :key="index1" :text="item1" size="small"></uni-tag>
							</view>
						</view>
					</view>
					<view class="d-flex a-center" style="font-size: 24upx;">
						<image src="../../../static/images/estate/light.png" style="width: 26upx;height: 26upx;" mode=""></image>
						<text style="margin-left: 20upx;font-weight: bold;">楼盘亮点</text>
						<text style="margin-left: 20upx;">{{item.lightSpot}}</text>
					</view>
				</view>
			</view>
			<view class="more-info-module">
				<image src="../../../static/images/estate/moreHouse.png" style="width: 26upx;height: 26upx;" mode=""></image>
				<text style="margin-left: 10upx;">更多房源</text>
			</view>
		</view>
		<sun-divider></sun-divider>
		<view class="white-space"></view>
		<view class="bottom-part">
			<view @click="handleConcern" class="concern-part">
				<image :src="concernFlag?srcActive:srcInactive" style="width: 40upx;height: 40upx;" mode=""></image>
				<text v-if="concernFlag" style="font-size: 24upx;">已关注</text>
				<text v-else style="font-size: 24upx;">关注</text>
			</view>
			<!-- <image src="../../../static/images/estate/photo.png" style="width: 570upx;height: 90upx;" mode=""></image> -->
			<button type="primary" class="tocall">
				<text style="font-size: 14px;letter-spacing: 3px;">致电售楼处\n</text> 
				<text style="font-size: 10px;">保护您的真实号码</text>
			</button>
		</view>
	</view>
</template>

<script>
	import api from '@/common/lib/request.js';
	import sunDivider from '@/components/common/sun-divider.vue';
	import apartSlide from '@/components/module/apart-slide.vue';
	import uniSwiperDot from "@/components/uni-ui/uni-swiper-dot/uni-swiper-dot.vue"; 
	import uniTag from "@/components/uni-ui/uni-tag/uni-tag.vue";
	import uniRate from '@/components/uni-ui/uni-rate/uni-rate.vue';
	export default {
		data() {
			return {
				srcInactive: '../../../static/images/estate/concern.png',
				srcActive: '../../../static/images/estate/concern-active.png',
				defaultLikeSrc: '../../../static/images/shuijiao.jpg',  //猜你喜欢的默认配图
				scrollH: 281,
				customLikes: [],  //猜你喜欢
				defaultModel: 0,
				contentId:'', // 户型所属文章id
                houseTypeId: '', // 户型id
				starColor: '#23C996',
				description: 'str',
				detailSource: {},
				estateContent: {},  //主体内容
				estateApart: [],  //户型展示
				estateAlbum: [],  //相册
				estateExport: [], //专家评楼
				estateComment: [], //总的用户评论列表
				commentRate: 0,
				comentContent: "",  //点评内容
				commentPartVisible: false,   //点评部分是否展示
				showEstateComment: [], //首页要展示的用户评论列表
				houseDelivery: {},  //交房信息
				openingInformation: {}, //开盘信息
				questionContent:"", //提问内容
				showQuestionBox: false,   //显示提问输入框的标志
				questions: [], //大家都在问
				showQuestions: [],  //要展示的提问信息
				concernFlag: 0,
				current: 0,
				moduleConfig:[{id: 0,name:'楼盘动态'},{id: 1,name:'预售证'},{id: 2,name:'开盘信息'},{id: 3,name:'交房信息'}],
				detailFieldList: ['交房时间','容积率','产权年限','绿化率',	'规划户数','物业费用','车位情况','建筑类型',						
					'占地面积','建筑面积','项目地址','售楼地址','开发商','物业公司'],
				houseTypeInfo: '',
				rateConfig:[
					{
						"field": "价格",
						"value": 4.2,
						"text": "暂无评分"
					},
					{
						"field": "地段",
						"value": 0,
						"text": "暂无评分"
					},
					{
						"field": "交通",
						"value": 0,
						"text": "暂无评分"
					},
					{
						"field": "配套",
						"value": 0,
						"text": "暂无评分"
					},
					{
						"field": "环境",
						"value": 0,
						"text": "暂无评分"
					}
				]
			}
		},
		computed:{
			comprehensiveScore(){
				let ratePlus = 0;
				this.rateConfig.forEach(item => {
					ratePlus = ratePlus + item.value;
				})
				return (ratePlus/5).toFixed(1)
			}
		},
		components:{
			sunDivider,
			apartSlide,
			uniSwiperDot,
			uniTag,
			uniRate
		},
		watch:{
			defaultModel(newVal){
				switch(newVal){
					case 0:
					  this.scrollH = 281;
					  break;
					case 1:
					  this.scrollH = 228;
					  break;
				    case 2:
					case 3:
				      this.scrollH = 120;
				      break;
				}
			}
		},
		onLoad(options) {
			if (options.contentId) {
				this.contentId = options.contentId;
				this.houseTypeId = options.houseTypeId;
			}
		},
		onShow(){
			this._getEstateDetail(this.houseTypeId)
			this.getCustomLikes()
		},
		methods: {
			swiperChange(event){
				let currentIdx = event.detail.current;
				this.defaultModel = currentIdx;
				console.log(event.detail)
			},
			_getEstateDetail(id) {
				let _this = this;
                api.request({
                    url: '/content/lpxxInfo/new',
                    data: {
                        contentId: this.contentId
                    }
                })
                    .then(response => {
						console.log(response)
                        _this.estateContent = response.content? response.content : {};
                        _this.estateApart = response.houseType ? response.houseType: []
                        _this.detailSource = response.comment ? response.comment:[];
                        _this.estateExport = response.expertCommentary ? response.expertCommentary:[];
                        _this.estateComment = response.comment.length > 0 ? response.comment : [];
                        _this.showEstateComment = response.comment.length > 0 ? response.comment.slice(0,2) : [];
                        _this.houseDelivery = response.houseDelivery.length > 0 ?response.houseDelivery[0]:{};
                        _this.openingInformation = response.openingInformation.length > 0? response.openingInformation[0] : {};
                        _this.questions = response.question.length > 0 ? response.question : [];
                        _this.showQuestions = response.question.length > 0 ? response.question.slice(0,1) : [];
                    })
                    .catch(err => {
                        console.log(err);
                    });
                // 获取户型信息
                api.request({
                    url: '/lpxx/house-type/detail',
                    data: {
                        contentId: this.houseTypeId
                    }
                })
                    .then(response => {
                        _this.houseTypeInfo = response;
                        _this.concernFlag = response.collected ? response.collected : 0;
                        _this.estateAlbum = response.images ? response.images: []
                        _this.estateAlbum = _this.estateAlbum.map(item => {
                            return {
                                image: item,
                                str: ''
                            }
                        })
                    })
                    .catch(err => {
                        console.log(err);
                    });
			},
			/**
			 * 展示评论区域
			 */
			showCommentContent(){
				let token = uni.getStorageInfoSync('token');
				if(token){
					this.commentPartVisible = true;
				}else{
					uni.navigateTo({
						url:"/pages/mine/login/login"
					})
				}
			},
			/**
			 * 提交点评内容
			 */
			submitComment(){
				let _this = this;
				if(this.comentContent.trim() == "" || this.comprehensiveScore == 0){
					return
				}
				api.request({
						url: '/lpxx/comment/save',
						data: {
							contentId: _this.contentId,
							content: _this.comentContent,
							score: _this.comprehensiveScore
						}
					})
					.then(response => {
						this.commentPartVisible = false;
						this.estateComment.push([])
					})
					.catch(err => {
						console.log(err);
					});
			},
			startQuestion(){
				this.questionContent = "";
				this.showQuestionBox = true;
			},
			// 保存提问信息
			saveQuestion(){
				let _this = this;
				api.request({
						url: '/lpxx/question/save',
						data: {
							contentId: this.contentId,
							type: 1,
							content: this.questionContent
						}
					})
					.then(response => {
						_this.showQuestionBox = false;
						uni.showToast({
							title:"提交成功"
						})
					})
					.catch(err => {
						console.log(err);
					});
			},
			getCustomLikes(){
				let _this = this;
				let locationInfo = uni.getStorageSync('location');
				api.request({
						url: '/lpxx/recommend',
						data: {
							contentId: _this.contentId,
							siteId: JSON.parse(locationInfo).id
						}
					}).then(response => {
						console.log(response)
						this.customLikes = response;
					}).catch(err => {
						console.log(err);
					});
			},
			switchModel(idx){
				this.defaultModel = idx;
			},
			change(e) {
			    this.current = e.detail.current;
			},
			skipToHouseloanCalculator(){
				uni.navigateTo({
					url: '/pages/estate/house_loan_calculator/house_loan_calculator'
				})
			},
			skipApartLayoutPage(){
				uni.navigateTo({
					url: '/pages/estate/apartLayout/apartLayout?contentId=' + this.contentId
				})
			},
			skipUserCommentPage(){
				uni.navigateTo({
					url: '/pages/estate/userComment/userComment?contentId=' + this.contentId
				})
			},
			skipEstateActivePage(){
				uni.navigateTo({
					url:'/pages/estate/estateActive/estateActive?contentId=' + this.contentId
				})
			},
			skipExportEstatePage(){
				uni.navigateTo({
					url:'/pages/estate/exportEstate/exportEstate?contentId=' + this.contentId
				})
			},
			//跳转到收藏界面
			skipConcernListPage(){
				uni.navigateTo({
					url:'/pages/specialPage/concernList/concernList'
				})
			},
			skipToQuestionPage() {
				uni.navigateTo({
					url: "/pages/estate/questionList/questionList?contentId=" + this.contentId + "&title=" + this.estateContent.projectName
				})
			},
			handleConcern(){
				let token = this.token = uni.getStorageSync('token');
				if(!token){
					uni.navigateTo({
						url:"/pages/mine/login/login"
					})
					return
				}
				if(this.concernFlag){
					this.cancelConcern();
				}else{
					this.addConcern();
				}
			},
			// 添加关注
			addConcern(){
				let _this = this;
				api.request({
						url: '/lpxx/collect/house-type-save',
						data: {
							contentId: _this.contentId,
                            houseTypeId: _this.houseTypeId
						}
					})
					.then(response => {
						_this.concernFlag = 1
					})
					.catch(err => {
						console.log(err);
					});
			},
			//取消收藏
			cancelConcern(){
				let _this = this;
				let token = this.token = uni.getStorageSync('token');
				if(!token){
					uni.navigateTo({
						url:"/pages/mine/login/login"
					})
					return
				}
				api.request({
						url: '/lpxx/collect/house-type/delete',
						data: {
							contentId: _this.contentId,
                            houseTypeId: _this.houseTypeId
						}
					})
					.then(response => {
						_this.concernFlag = 0
					})
					.catch(err => {
						console.log(err);
					});
			},
            checkEstateDetail(id) {
                if (id) {
                    uni.navigateTo({
                        url: '/pages/estate/estateDetail/estateDetail?contentId=' + id
                    })
                }
            }
		}
	}
</script>

<style scoped>
	.estate-title-part {
		width: 710upx;
		padding: 0 20upx;
	}
	.tocall{
		width: 570upx;
		height: 90upx;
		line-height: 14px;
		font-weight: normal;
		/* font-size: 14px; */
		padding-top: 14upx;
		background-color: #005BAD;
	}
	.title-top{
		font-family: PingFang-SC-Bold;
		font-size: 48upx;
		color: #333333;
		letter-spacing: 0;
		font-weight: bold;
	}
	.calc-btn{
		display: flex;
		width: 150upx;
		height: 50upx;
		align-items: center;
		justify-content: center;
		border-radius: 25upx;
		text-align: center;
		border: 1px solid #E53636;
		color: #E53636 ;
		font-size: 24upx;
	}
	.more-info-module{
		display: flex;
		justify-content: center;
		align-items: center;
		background: #F5FAFF;
		border-radius: 8upx;
		height: 74upx;
		font-family: PingFangSC-Regular;
		font-size: 28upx;
		color: #005BAD;
		letter-spacing: 0;
		margin: 20upx 0;
	}
	.title-basic-info{
		display: flex;
		font-size: 28upx;
		color: #878787;
		height: 60upx;
		line-height: 60upx;
	}
	.estate-title{
		font-size: 32upx;
		color: #333333;
		line-height: 42upx;
	}
	.label-wrapper{
		align-items: center;
		justify-content: space-around;
		font-size: 32upx;
		height: 84upx;
		text-align: center;
	}
	.label-item.active{
		height: 40px;
		border-bottom: 2px solid #005BAD;
		display: flex;
		align-items: center;
	}
	.label-wrapper .active{
		color: #005BAD;
	}
	.tag-item{
		margin-right: 6upx;
		color: #9B9B9B;
	}
	.bottom-part{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 9999;
		padding: 0 40upx;
		height: 106upx;
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		align-items: center;
		background-color: #FFFFFF;
	}
	.concern-part{
		display: flex;
		width: 100upx;
		flex-direction: column;
		align-items: center;
	}
	.apart-chapter{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20upx;
		margin-top: 40upx;
	}
	.tags {
		font-size: 16upx;
		border-radius: 2upx;
		height: 26upx;
		line-height: 26upx;
		text-align: center;
	}
	.custom-tag{
		background: #FFFFFF;
		border: 2upx solid #C9C9C9;
		border-radius: 2upx;
		font-size: 24upx;
		color: #333333;
		text-align: center;
		line-height: 38upx;
		padding: 0 10upx;
		height: 38upx;
		margin-right: 10upx;
	}

	.tag-1 {
		width: 50upx;
		background: rgba(242, 156, 159, .24);
		margin-right: 12upx;
	}

	.tag-2 {
		width: 96upx;
		background: rgba(136, 171, 218, .24);
	}

	.basic-info {
		display: flex;
		align-items: center;
		height: 80upx;
		border-bottom: 1upx solid #DDDDDD;
		font-size: 28upx;
		color: #999999;
	}

	.basic-info .iconfont {
		margin-right: 10upx;
	}
	.module-title{
		font-size: 36upx;
		color: #2A2A2A;
		font-weight: bold;
	}
	.detail-module{
		display: flex;
		flex-direction: column;
		color: #999999;
		font-size: 28upx;
	}
	.active{
		color: #005BAD!important;
	}
	.active-concern{
		color: #F85D5A!important;
	}
	.white-space{
		height: 106upx;
		width: 100%;
	}
	.concern-file{
		position: absolute;
		top: 110upx;
		right: 38upx;
		width: 40upx;
		height: 38upx;
	}
	.sun-textarea{
		background-color: #eee;
		width: 100%;
		height: 240upx;
		border-radius: 36upx;
		/* width: 480upx; */
		text-indent: 36upx;
		font-size: 32upx;
	}
</style>
